<script setup lang="ts">
import {Delete, WarnTriangleFilled, InfoFilled, Plus} from '@element-plus/icons-vue'
import api from '@/api/index'
import {onMounted, reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import type {collectionInfo} from "@/types";
import {ElMessage} from "element-plus";

const router = useRouter()



onMounted(() => {
  getCollectionList()
})

const getCollectionList = () => {
  collections.length = 0
  api.getCollectionList()
      .then((res) => {
            Object.assign(collections, res.data.data)
            total.value = collections.length
            getPageInfo()
          }
      ).catch(error => {
        ElMessage('获取集合列表失败')
      }
  )
}


const collection = (row: collectionInfo) => {
  router.push({name: 'collection-detail', params: {namespace: row.namespace, collectionName: row.collectionName}})
}

//创建集合
const createCollection = () => {
  router.push({name: 'collection-create', params: {namespace: 'namespace_1'}})
}

// 删除集合
const deleteCollection = (row: collectionInfo) => {
  api.deleteCollection(row.namespace, row.collectionName)
      .then((res) => {
        if (res.data.code === 0) {
          getCollectionList()
          ElMessage.success('删除集合成功')
        }
      }).catch(error => {
    ElMessage.error('删除集合失败')
  })
}




let collections = reactive<Array<collectionInfo>>([]) //这里是从后端获取的所有数据
let total = ref(0)  //总数据条数
let currentpage = ref(1) //当前所在页默认是第一页
let pagesize = ref(5)  //每页显示多少行数据 默认设置为10
let pageTicket = reactive<Array<collectionInfo>>([]) //分页后的当前页数据

//分页
const getPageInfo = () => {  // 获取当前页的数据信息
  //清空pageTicket中的数据
  pageTicket.length = 0
  // 获取当前页的数据
  for (let i = (currentpage.value - 1) * pagesize.value; i < total.value; i++) {
    //把遍历的数据添加到pageTicket里面
    pageTicket.push(collections[i]);
    //判断是否达到一页的要求
    if (pageTicket.length === pagesize.value) break;
  }
}
const handleSizeChange = (size: number) => {  //分页时修改每页的行数,这里会自动传入一个size
  //修改当前每页的数据行数
  pagesize.value = size;
  //数据重新分页
  getPageInfo();
}
const handleCurrentChange = (pageNumber: number) => { //调整当前的页码
  //修改当前的页码
  currentpage.value = pageNumber;
  //数据重新分页
  getPageInfo()
}

</script>

<template>

  <el-button type="primary" :icon="Plus" @click="createCollection">创建集合</el-button>
  <br><br>
  <el-table border :data="pageTicket" table-layout="auto">
    <el-table-column type="index" label="NO"  align="center"/>
    <el-table-column prop="namespace" label="命名空间"  align="center"/>
    <el-table-column prop="collectionName" label="集合名称"  align="center"/>
    <el-table-column prop="sampleColumns" label="样本扩展字段"  align="center" height="100">
      <template #default="scope">
        <el-table :data="scope.row.sampleColumns" border table-layout="auto">
          <el-table-column prop="name" label="属性名称" align="center"/>
          <el-table-column prop="comment" label="属性备注" align="center"/>
          <el-table-column prop="dataType" label="数据类型" align="center"/>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column prop="faceColumns" label="人脸数据扩展字段"  align="center" height="100">
      <template #default="scope">
        <el-table :data="scope.row.faceColumns" border table-layout="auto">
          <el-table-column prop="name" label="属性名称" align="center"/>
          <el-table-column prop="comment" label="属性备注" align="center"/>
          <el-table-column prop="dataType" label="数据类型" align="center"/>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column prop="collectionComment" label="集合备注" align="center"/>
    <el-table-column label="操作" align="center" >
      <template #default="scope">
        <el-tooltip content="集合详情" placement="top">
          <el-button type="primary" :icon="InfoFilled" @click="collection(scope.row)"/>
        </el-tooltip>
        <el-tooltip content="删除集合" placement="top">
          <el-popconfirm
              width="220"
              confirm-button-text="确认"
              cancel-button-text="取消"
              :icon="WarnTriangleFilled"
              title="您确定要删除此集合吗？"
              @confirm="deleteCollection(scope.row)"
          >
            <template #reference>
              <el-button type="danger" :icon="Delete"/>
            </template>
          </el-popconfirm>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
  <el-row style="text-align: right">
    <el-col>
      <el-pagination
          style="position: absolute; right:10px;margin: 10px"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentpage"
          :page-sizes="[5, 10,50,100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-col>
  </el-row>
</template>

<style scoped>


</style>